<template>
  <el-dialog
    v-model="dialogVisible"
    :title="id ? '修改套餐包' : '新增套餐包'"
    width="500px"
    :close-on-click-modal="false"
    destroy-on-close
  >
    <!-- 基础信息展示 -->
    <div style="max-height: 500px; overflow: auto">
      <el-form ref="formRef" :rules="rules" :model="formData" label-width="140px">
        <el-form-item label="套餐包名称 :" prop="name">
          <el-input v-model="formData.name" placeholder="请输入套餐包名称" />
        </el-form-item>
        <el-form-item label="套餐权限 :" prop="shop_auth_list_ids">
          <el-checkbox-group v-model="formData.shop_auth_list_ids">
            <el-row>
              <el-col :span="12" v-for="(item, index) in permissionList" :key="index">
                <el-checkbox :key="item.id" :value="item.id">{{ item.name }}</el-checkbox>
              </el-col>
            </el-row>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="loading"> 确 定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="AddVipTimeModal">
import { ref, reactive, computed, onMounted, watch } from "vue";
import { ElMessage, type FormInstance, type FormItemRule } from "element-plus";
import { addPackageApi, getPlatformAuthListApi, getPackageDetailApi } from "@/api/modules/permission";

interface Props {
  modelValue: boolean;
  id?: number | undefined;
}
interface FormDataProps {
  name: string | undefined;
  shop_auth_list_ids: number[];
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  id: undefined
});

const emit = defineEmits(["update:modelValue", "success"]);

const dialogVisible = computed({
  get: () => props.modelValue,
  set: val => emit("update:modelValue", val)
});
watch(
  () => props.modelValue,
  () => {
    if (props.modelValue) {
      if (props.id) {
        getPackageDetailApi({
          auth_package_id: props.id
        }).then(res => {
          if (res.code === 1) {
            formData.name = res.data.info.name;
            formData.shop_auth_list_ids = res.data.info.shop_auth_list_ids.split(",").map(d => Number(d));
          }
        });
      } else {
        formData.name = "";
        formData.shop_auth_list_ids = [];
      }
    }
  }
);
const permissionList = ref<{ id: number; name: string }[]>([]);
const formRef = ref<FormInstance>();
const loading = ref(false);

const formData = reactive<FormDataProps>({
  name: "",
  shop_auth_list_ids: []
});

const rules = {
  name: [{ required: true, message: "请输入套餐包名称", trigger: "blur" }],
  shop_auth_list_ids: [{ required: true, message: "请选择套餐权限", trigger: "change" }]
} as Record<string, FormItemRule[]>;

const handleSubmit = async () => {
  if (!formRef.value) return;
  await formRef.value.validate();
  loading.value = true;
  let params: any = {
    name: formData.name,
    shop_auth_list_ids: formData.shop_auth_list_ids.join(",")
  };
  if (props.id) {
    params.auth_package_id = props.id;
  }
  addPackageApi(params).then(res => {
    if (res.code === 1) {
      ElMessage.success("新增成功");
      loading.value = false;
      dialogVisible.value = false;
      emit("success");
    }
  });
};

onMounted(() => {
  // 获取全部权限
  getPlatformAuthListApi({
    loading: true
  }).then(res => {
    permissionList.value = res.data.list;
  });
});
</script>

<style lang="scss" scoped>
.vip-renewal-container {
  padding: 20px 0;
  .info-section {
    padding: 20px;
    margin-bottom: 24px;
    background: linear-gradient(to right, #f8f9fa, #ffffff);
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 5%);
    .info-item {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      &:last-child {
        margin-bottom: 0;
      }
      .label {
        width: 120px;
        font-size: 14px;
        color: #606266;
      }
      .value {
        font-size: 14px;
        font-weight: 500;
        color: #303133;
      }
    }
  }
  .renewal-section {
    padding: 0 20px;
    :deep(.el-form-item__label) {
      font-weight: 500;
    }
    :deep(.el-input-number) {
      width: 100%;
    }
  }
}
.dialog-footer {
  padding-top: 20px;
  text-align: right;
}
</style>
